<template>
	<view class="logoImage">
		<image class="Logo" src="../../static/image/Logo/logo.png"></image>
	</view>
	<!-- style="background-size: 50% 53%; top: 220rpx; width: 200px ; height:140px;" -->
	<view class="zhuce_body">
		<view class="zhuce-container">
			<!-- TAB栏 -->

			<!-- zhuce表单 -->
			<form class="zhuce-form" @submit="zhuce">
				<!-- 表单输入框 -->
				<input type="text" placeholder="手机号" name="phone" v-model="regInfo.phone" class="input-field" />

				<input type="password" placeholder="请输入密码" name="password" v-model="regInfo.password"
					class="input-field" />

				<input type="password" placeholder="请重新输入密码" name="password" v-model="regInfo.cPassword"
					class="input-field" />

				<view class="verification-code">
					<input type="text" placeholder="请输入验证码" name="verificationCode" v-model="regInfo.verificationCode"
						class="input-field input-verification-code" />
					<view v-if="!counting" class="send-verification-code" @click="startCountdown"
						:class="{ disabled: counting }">
						{{ counting ? `${countdown}秒后重试` : '发送验证码' }}
					</view>

					<view v-else class="send-verification-code disabled">{{ countdown }}秒后重试</view>
				</view>

				<!-- 登录按钮 -->
				<button class="zhuce-button" form-type="submit">注册</button>
				<button @click="goLogin" class="zhuce-button-ce" style="margin-top: 10px;">返回登录</button>
			</form>

			<!-- 	{{phoneNumber}}
    {{password}}
    {{verificationCode}}
    {{chooseRole}} -->
		</view>
	</view>
</template>

<script>
	// import { SendVerificationCodeRequest, registerApi } from '@/api/loginPageApi.js';


	import {
		SendVerificationCodeRequest
	} from '@/api/SendVerificationCodeApi.js';
	import {
		registerApi
	} from '@/api/registerApi.js';

	export default {
		data() {
			return {
				// activeTab: 'password',//登录方式
				chooseRole: 'user', //登录时不改角色，默认角色为user
				counting: false, //是否倒计时中？
				countdown: 60, //倒计时长
				regInfo: {
					phone: '', //输入的手机号
					password: '', //输入的密码
					cPassword: '', //确认输入的密码
					verificationCode: '' //输入的验证码
				}
			};
		},

		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			/**
			 * @param {Object} tab 切换登录方式
			 */
			// switchTab(tab) {
			//   this.activeTab = tab;
			// },

			/**
			 * 手机号校验
			 */
			validatePhone() {
				// 长度校验
				if (this.regInfo.phone.length !== 11) {
					// 注意这里使用 !== 表示不等于
					return false;
				}

				// 格式校验，使用正则表达式进行判断
				const regex = /^[1-9]\d{10}$/; // 正则表达式匹配11位数字
				if (!regex.test(this.regInfo.phone)) {
					return false;
				}

				return true;
			},

			/**
			 *

			 * 密码校验
			 */
			validatePassword() {
				// 长度校验
				if (this.regInfo.password < 6 || this.regInfo.password > 20) {
					return false;
				}

				// 格式校验，这里使用正则表达式进行判断，可以根据需求进行修改
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/; // 格式校验，要求包含大小写字母和数字
				if (!regex.test(this.regInfo.password)) {
					return false;
				}

				return true;
			},

			verificationCode() {
				// 长度校验
				if (this.regInfo.verificationCode.length !== 4) {
					// 注意这里使用 !== 表示不等于
					return false;
				}

				return true;
			},

			/**
			 * @param {Object} message 提示框
			 */
			showAlert(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				});
			},

			async zhuce(formData) {
				console.log(formData.detail); //表单提交的数据
				console.log(formData.detail.value); //表单提交的数据
				// 校验手机号和密码字段
				if (!this.validatePhone()) {
					this.showAlert('请输入有效的手机号');
					return;
				}

				if (!this.validatePassword()) {
					this.showAlert('请输入有效的密码');
					console.log('请输入有效的密码');
					return;
				}
				if (this.regInfo.password !== this.regInfo.cPassword) {
					this.showAlert('两次密码输入不一致！');
					return;
				}

				// 18786434920  Ldy21787
				// this.showAlert('调用密码登录的接口');
				// PasswordLoginRequest();

				// 校验手机号和验证码字段
				if (!this.validatePhone()) {
					this.showAlert('请输入有效的手机号');
					return;
				}

				if (!this.verificationCode()) {
					this.showAlert('请输入验证码');
					return;
				}

				const res = await registerApi({
					phone: this.regInfo.phone,
					password: this.regInfo.password,
					code: this.regInfo.verificationCode
				});
				if (res.data.code == 200) {
					this.regInfo = {};
					uni.showToast({
						title: res.data.message,
						icon: 'success'
					});
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'error'
					});
				}
				//   uni.request({
				//     // 发送到后端url中的login
				//     url: 'http://47.115.211.73:8080/register',
				//     method: 'POST',
				//     params: {
				//       phone: this.regInfo.phoneNumber,
				//       password: this.regInfo.password,
				//       code: this.regInfo.verificationCode
				//     },
				//     success(res) {
				//       console.log(res);
				// this.regInfo = {}
				//       this.showAlert('注册成功！');
				//     },
				//     fail(err) {
				//       console.log(err);
				//     }
				//   });
			},
			/**
			 * @param {Object} e 切换角色
			 */
			handleChange(e) {
				this.chooseRole = e.detail.value;
				console.log(this.chooseRole);
			},
			/**
			 * 开始倒计时/发送验证码
			 */
			async startCountdown() {
				// 校验手机号 18786434920
				if (!this.validatePhone()) {
					this.showAlert('请输入有效的手机号');
					return;
				}
				// this.showAlert('调用后端接口，通过运营商拿取验证码');
				uni.request({
					url: 'http://47.115.211.73:8080/code/user/' + this.regInfo.phone,
					method: 'GET',
					success(res) {
						uni.showToast({
							title: '发送验证码成功！',
							icon: 'success'
						});
						console.log('发送验证码返回的数据：', res);
						return res;
					},
					fail(err) {
						return res;
					}
				});
				// const res = SendVerificationCodeRequest(this.regInfo.phoneNumber);
				// console.log(res);
				// this.regInfo.verificationCode = res.data

				if (!this.counting) {
					this.counting = true;
					const timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown -= 1;
						} else {
							this.counting = false;
							this.countdown = 60; // 重置倒计时
							clearInterval(timer); // 清除定时器
						}
					}, 1000);
				}
			}
		}
	};
</script>

<style lang="scss" scped>
	.co {
		color: rgb(255, 182, 18);
	}

	.logoImage {
		.Logo {
			background-color: #333333;
			position: fixed;
			top: 20%;
			left: 50%;
			transform: translate(-50%, -40%);
			width: 750rpx;
			height: 550rpx;
			z-index: 20;
		}
	}

	.zhuce_body {
		z-index: 9999;
		height: 100vh;
		background-color: #333333;
		display: flex;
		align-items: center;
	}

	.zhuce-container {
		z-index: 99;
		background-color: #333333;
		border-left: 1rpx solid #feb51d;
		border-right: 1rpx solid #feb51d;
		border-radius: 20rpx;
		// box-shadow: 10rpx 10rpx 8rpx #afafaf;
		box-sizing: border-box;
		padding: 50rpx;
		width: 600rpx;
		height: 750rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -30%); //绝对值由小到大==>左右 下上

		.tab-bar {
			display: flex;
			justify-content: space-around;
			font-size: 32rpx;

			.common {
				width: 200rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
			}

			.tab-active {
				color: #ffb612;
				// background-color: #E6F7FF;
				border-bottom: 7rpx #ffb612 solid;
			}
		}

		.zhuce-form {
			margin-top: 40rpx;

			.input-field {
				width: 100%;
				height: 80rpx;
				margin-top: 30rpx; //必须与verification-code的同一样式同步
				margin-bottom: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #ffb612;
				color: white;
				// border-radius: 10rpx;
			}

			.verification-code {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				// 验证码输入框
				.input-verification-code {
					height: 80rpx;
					margin-bottom: 0;
					margin-top: 0;
					margin-right: 20rpx;
				}

				// 按钮
				.send-verification-code {
					height: 70rpx;
					width: 300rpx;
					padding: 0;
					font-size: 30rpx;
					color: white;
					border: none;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgb(255, 182, 18);
				}
			}

			.disabled {
				cursor: not-allowed; //当鼠标光标悬停在该元素上方时，光标将变为禁止符号
			}

			.radioGroup {
				margin: 30rpx 0;
				display: flex;
				justify-content: space-around;
			}

			.zhuce-button {
				width: 100%;
				height: 80rpx;
				background-color: rgb(255, 182, 18);
				color: white;
				border: none;
				border-radius: 10rpx;
				cursor: pointer;

				&:active {
					background-color: rgb(255, 182, 18);
				}
			}

			.zhuce-button-ce {
				width: 100%;
				height: 80rpx;
				background-color: #333333;
				color: rgb(255, 182, 18);
				border: none;
				border-radius: 10rpx;
				cursor: pointer;

				&:active {
					background-color: #333333;
				}
			}
		}
	}
</style>